<template>
	<view class="pages">
		<view class="bg"> </view>
		<view style="padding: 20rpx;z-index: 2;position: relative;">
			<view class="card">
				<view class="owner">
					<view class="img">
						<image :src="info.profilePhoto" mode="aspectFill" class="image"></image>
						<image v-if="item.newStaff==1"
						src="@/static/home/homelist/xrz.png" mode="widthFix" class="tipimg"></image>
						<image v-if="item.monthStar==1"
						src="@/static/home/homelist/byzx.png" mode="widthFix" class="tipimg"></image>
					</view>
					<view class="txt">
						<view class="name">
							<text>{{ info.name}}</text>
			
							<text style="font-weight: 400;font-size: 28rpx;margin-left: 10rpx;">{{info.nativePlace}}</text>
							
							<!-- 未收藏 -->
							<image v-if="info.isCollect==0" @click.stop="handleCollect('create',item,index)"
							src="@/static/home/homelist/sc02.png" mode="widthFix"></image>
							<!-- 收藏 -->
							<image v-else @click.stop="handleCollect('delete',item,index)"
							src="@/static/home/homelist/sc01.png" mode="widthFix"></image>
							</view>
						<view class="tip" >
							<text class="text2">入驻 {{info.yearsAgo}}年 ｜ {{info.merchantName}}</text>
			
						</view>
						<view class="tip" >
							<text class="text2">{{info.age}}岁｜总接单 {{info.orderNum}}｜粉丝 {{info.fansNum}}</text>
			
						</view>
						<view v-if="info.workTags" style="justify-content: space-between;display: flex;">
							<view style="flex: 1;display: flex;flex-wrap: wrap;margin-top: 10rpx;">
								<view class="text" style="margin:4rpx 5rpx;background-color: #F5F5F5;font-size: 20rpx;color: #999999;padding:9rpx;border-radius:7rpx;"
								v-for="it in info.workTags.split(',')" :key="it">
									{{it}}
								</view>
							</view>
			                <text style="font-weight: 400;font-size: 22rpx;color: #333333;">
								 {{roundDistance(info.distance)}}km
							</text>
						</view>
						<!-- v-if="info.isCoupon==1" -->
						<view v-if="info.isCoupon==1" class="yhj" @click="tourl('/pages/appointment/getCoupon?type=0&id='+staffId)">
							<image src="@/static/home/homelist/yhj.png" mode="widthFix"></image>
							<text>现在下单有优惠券可用哦！</text>
							<image src="@/static/appointment/moreright.png" mode="widthFix"></image>
						</view>
					</view>
			 
					<button open-type="share" plain=none class="share" style="margin: 0;padding: 0 20rpx;" >
						分享         
					</button>
				 
				</view>
			
				<view class="serve" >
					<view class="s1">
						服务时间
					</view>
					
					<view class="s2" @click="showServeTime">
						<text>最早可约</text>
						<text class="day">{{info.startTime  || '' }}</text>
						<image src="../../static/appointment/moreright.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 认证信息 -->
		<view class="imgbox" style="background-color: #fff;">
			<wu-title title='认证信息'></wu-title>
			<view class="iconbox">
				
				 <view class="iconlist" v-for="item in authList" :key="item.label">
					<view>
						<image :src="item.icon"></image>
						<uni-icons v-if="item.hasAuth" class="icon" type="checkbox-filled" color="#277EEFFF" size="20"></uni-icons>
						<uni-icons v-else class="icon" type="clear" color="#AAAAAA" size="20"></uni-icons>
					</view>
					<text>{{ item.label }}</text>
				 </view>
				 
			</view> 
			
		</view>
	
		<!-- 风采展示 -->
		<view class="imgbox">
			 <wu-title title='风采展示'></wu-title>
			 <view class="imglist">
				<scroll-view style="white-space: nowrap;display: flex;" scroll-x="true"  scroll-left="120">
					<view v-for="(item,index) in personImg" :key="index" @click="look(index,personImg)">
						<image :src="item" mode="aspectFill"></image>			 
					</view>
				</scroll-view>
				
			 </view>
			<view class="nothing" v-if="info.info.photos===''">
				- 暂无照片 -
			</view>
		</view>
		
		<!-- 服务项目 -->
		<view class="imgbox">
			 <wu-title title='服务项目'></wu-title>
			 
			 <view class="servelist">
			 	<view v-for="(item,index) in serveList" :key="item.id" class="serve"
				@click="tourl('/pages/order/order?categoryId='+item.categoryId+'&oneCategoryName='+item.oneCategoryName+'&oneCategoryId='+item.oneCategoryId+'&staffId='+staffId+'&staffName='+info.name+'&merchantId='+info.merchantId)">
			 		<view class="s1">{{item.name}}</view>  	
					<view class="s2"><text>{{item.money}}</text> 元/{{item.unit}}</view>
					<view class="s3"  >下单</view>
			 	</view>
			 </view>
		</view>
		
		<!-- 用户评价 -->
		<view class="pj" @click="tourl('/pages/my/appraise/appraise?staffId='+staffId)">
			 <wu-title title='用户评价'></wu-title>
			 
			 <view class="flex">
				 好评率{{info.positiveReviewsRate*100}}%
				<u-icon slot="right" name="arrow-right"></u-icon>
			 </view>
		</view>
		<serverTimePopup ref="serverTimePopup" :staffId="staffId" :merchantId="info.merchantId"/>
	</view>
</template>

<script>
	import {staffscAPI} from "@/api/home.js"
	import wuTitle from "@/components/wu-title.vue"	
	import {staffUserDetailsAPI} from "@/api/appointment.js"
	import serverTimePopup from "@/components/serverTimePopup.vue"
	import {mapState,mapActions } from "vuex";
	const iconlist=[
		{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/8a54ac4e770107ddc6a07f57e2bdf789fdd604502d9aeeacabe4dcb6e274a5e3.png', label: '身份认证', flag: false },
		{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/c7f23f0b025d8f2afc638ea8214c8696486d172ded2bfc2d3f3479d9f15267e4.png', label: '健康认证', flag: false },
		{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/9cb87959268da77c142528ff370308cd54ce7b0eed7264c376a30cd84197abac.png', label: '培训认证', flag: false },
		{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/fc67b89d2e2c97b75380e7dba00e1a4699f5512a1b6be1029207620e90ec3e5a.png', label: '工具认证', flag: false },
		{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/177b1aa556cadf0f941f0797af4f6f9484f4fc85f666d756dee49e3c9e488b09.png', label: '商业保险', flag: false },
	]
	export default {
		components:{
			wuTitle ,serverTimePopup
		},
		data() {
			return {
				authList:[
					
				],
				personImg:[ ],
				info: {

				},
				user_role: "",
				staffId: "",
				imgList:[],
				serveList:[]
			}
		},
		created() {

		},
		computed:{
		    ...mapState("select", ["location","city"])
		},
		onLoad(option) {
			if(!uni.getStorageSync('userId') && option.forwarderId){
				uni.setStorageSync("lastUrl",`/pages/appointment/waiterInfo?id=${this.staffId}`)
				uni.reLaunch({
					url:'/pages/login/login?forwarderId='+option.forwarderId
				})
				
			}
			this.staffId = option.id
			this.getdata()
		},
		onShareAppMessage(){
			return {
				imageUrl:this.info.profilePhoto,
				title: this.info.name+'这个人不错给你看看',
				path: `/pages/appointment/waiterInfo?id=${this.staffId}&forwarderId=${uni.getStorageSync('userId')}`,
				success:res=>{  ///成功时返回  {errMsg: "shareAppMessage:ok"}
					console.log(res)
					// alert(res)
				},
				fail:res=>{   ///取消分享返回 {errMsg: "shareAppMessage:fail cancel"}
					console.log(res)
					// alert(res)
				}
			}
		},
		methods: {
			roundDistance(distance) {
				if(distance){
					return Math.round(distance * 10) / 10; // 保留一位小数
				}
				return '-'
			},
			handleCollect(url,item){
				 
				staffscAPI(url,{
					staffId:this.staffId
				}).then(res=>{
					console.log(res)
					this.$set(this.info,'isCollect',url=='create'? '1':'0')
				})
			},
			showServeTime(){
				this.$refs.serverTimePopup.open()
			},
			getdata() {
				var data = {
					staffId: this.staffId,
					longitude:this.location.longitude,
					latitude:this.location.latitude,
				}

				staffUserDetailsAPI(data).then(rest => {
					let res = rest.data
					this.info = res
					this.personImg=res.photos.split(",")
					this.serveList=res.list
					this.authList=[
						{...iconlist[0],hasAuth:res.identification!=='0' && res.identification!==null && res.identification!==''},
						{...iconlist[1],hasAuth:res.healthPhoto!=='0' && res.healthPhoto!==null && res.healthPhoto!==''},
						{...iconlist[2],hasAuth:res.trainingCertification!=='0' && res.trainingCertification!==null && res.trainingCertification!==''},
						{...iconlist[3],hasAuth:res.withTools!=='0' && res.withTools!==null && res.withTools!==''},
						{...iconlist[4],hasAuth:res.insurance!=='0' && res.insurance!==null && res.insurance!==''}
					] 
					 
				})

			},
			look(current, urls) {
				uni.previewImage({
					current,
					urls,
					// 只在app里面起作用
					loop: true,
					indicator: "number"

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.pages {
		background-color:#F8F8F8;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bg {
		width: 100%;
		height: 240rpx;
		background: #277EEF;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.card {
		width: 100%;
		box-sizing: border-box;
		border-radius: 10rpx;
		 
		border-radius: 20rpx;
		background-color: #fff;
		.owner {
			 
			width: 100%;
			padding: 20rpx;
			display: flex;
			background-color: #fff;
			border-radius: 20rpx;
			position: relative;
			margin-bottom: 20rpx;

			.img{
				position: relative;
				width: 240rpx;
				height: 300rpx;
				overflow: hidden;
				border-radius: 20rpx;
				margin-right: 20rpx; 
				background-color: #f1f1f1;
				.image{
					border-radius: 20rpx;
					height: 300rpx; 
					width: 100%;
				}
				.tipimg{
					position: absolute;
					left: 0;
					bottom: 20rpx;
					width: 128rpx;
					height: 40rpx;
				}
			}
			.txt {
				padding: 10rpx 2rpx;
				flex: 1;

				.name {
					font-weight: bold;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0 15rpx;
					}
				}

				.tip {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.text {
						padding: 8rpx 12rpx;
						background: #F5F5F5;
						border-radius: 4rpx;
						margin-right: 10rpx;
						font-size: 20rpx;
						color: #999999;
						line-height: 23rpx;
					}

					.text2 {
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
						line-height: 23rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					image {
						width: 128rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}

				.yhj {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					justify-content: space-between;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.share {
				position: absolute;
				top: 25rpx;
				right: 20rpx;

				border-radius: 48rpx;
				border: 1rpx solid #277EEF;
				 
				font-size: 28rpx;
				color: #277EEF;
				padding: 0rpx 20rpx;
				line-height:50rpx;
			}

		}
		.serve{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx #EEEEEE solid;
			 
			padding: 26rpx;
			.s1{
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
			.s2{
				font-size: 28rpx;
				display: flex;
				align-items: center;
				.day{
					font-weight: bold;
					font-size: 28rpx;
					color: #277EEF;
					margin: 0 10rpx;
				}
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
		
	.imgbox{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
	}
	
	.iconbox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		.iconlist{ 
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			&>view{
				position: relative;
				image{
					width: 70rpx;
					height: 70rpx;
				}
				.icon{
					position: absolute;
					right: -7rpx;
					bottom: -7rpx;
					background-color: #fff;
					margin: 0;
					padding: 0;
				}
			}
			&>text{
				font-size: 24rpx;
				color: #666;
				margin-top: 6rpx;
			}
			
		}
	}
	
	.imglist{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		 view{
			width: 160rpx; 
			display: inline-block;
			image{
				width: 160rpx;
				height: 160rpx;
				margin: 10rpx;
				border-radius: 10rpx;
			}
		}
	}
	
	.servelist{
		padding: 20rpx;
		.serve{
			margin: 20rpx 0;
			background-color: #F2F2F2;
			border-radius: 50rpx;
			width: 100%;
			display: flex;
			align-items: center;
			padding:  10rpx;
			.s1{
				font-size: 32rpx;
				font-weight: bold;
				padding-left: 15rpx;
			}
			.s2{
				flex: 1;
				font-size: 34rpx;
				text-align: right;
				text{
					font-size: 32rpx;
					font-weight: bold;
					color: red;
					color: #277EEF;
					margin-right: 5rpx;
				}
			}
			.s3{
				font-size: 32rpx;
				width: 140rpx;
				margin-left: 20rpx;
				text-align: center;
				padding:15rpx 20rpx;
				background-color: #277EEF;
				color: #fff;
				border-radius: 50rpx;
				
			}
		}
	}

	.pj{
		display: flex;
		justify-content: space-between;
		padding-right: 20rpx;
		margin: 20rpx 0 40rpx;
		view{
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
		}
	}
</style>